<template>
    <PdfViewer :pdfUrl="pdfUrl"></PdfViewer>
</template>

<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
import PdfViewer from "./PdfViewer.vue";

const pdfUrl = ref("");

onMounted(() => {
  fetchPdfFile();
});

const fetchPdfFile = async () => {
  try {
    const responce = await axios.get("/api/getPdf", {
      responseType: "blob",
    });

    console.log("responce", responce.data)

    const blob = new Blob([responce.data], { type: "application/pdf" });
    // const blob = responce.data.blob()

    console.log("blob", blob)

    pdfUrl.value = URL.createObjectURL(blob);

    console.log("pdfUrl", pdfUrl.value)
  } catch (errMsg) {
    console.log("Error fetching the PDF file", errMsg);
  }
};
</script>

<style scoped>
.pdf-wrap {
  width: 400px;
  height: 600px;
  overflow: auto;
  border: 1px solid #000;
}
</style>